import React, { useState } from 'react'
import { Button, Form, Input ,Toast} from 'antd-mobile'
import Headers from '../../components/Header/Header.jsx'
import { reqRegister } from '../../request/api.js'
import logo from '../../assets/img/login_logo.png'
import './Register.less'

const Register=(props)=>{
  console.log(props)
  const [user, setUser] = useState({
    phone:"",
    nickname:"",
    password:""
  })
  const doRegister=()=>{
    reqRegister(user).then(res=>{
      if(res.data.code===200){
        Toast.show({
          content:res.data.msg
        })
        // 跳转登录
        props.history.push('/login')
      }
    })
  }
  return (
    <div className='register'>
    <Headers title="注册" back ></Headers>
    <div>{JSON.stringify(user)}</div>
    <div className='form'>
      <div className='logo'>
        <img src={logo} alt="" />
        </div>
    <Form layout='horizontal'>
      <Form.Item label='手机号' name='phone'>
        <Input placeholder='请输入手机号' clearable onChange={(e) => setUser({...user,phone:e})} />
      </Form.Item>
      <Form.Item label='昵称' name='nickname'>
        <Input placeholder='请输入昵称' clearable onChange={(e) =>setUser({...user,nickname:e})}/>
      </Form.Item>
      <Form.Item label='密码' name='password'>
        <Input placeholder='请输入密码' clearable type='password' onChange={(e) =>setUser({...user,password:e})}/>
      </Form.Item>
    </Form>
    <div className='text-center'>
      <Button color="primary" onClick={() =>doRegister()}>注册</Button>
    </div>
    </div>
  </div>
  )
}
export default Register
